<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head lang="en">
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <th:block th:include="include :: header('添加角色')"/>
    <th:block th:include="include :: headertable"/>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:850px;height:660px;"></div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: footertable"/>
</body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var form;
    layui.use(['form'], function () {
        form = layui.form;
        if (parent.json) {
            var parent_json = parent.json;
            form.val("form", {
                "id": parent_json.id
                // , "name": parent_json.name
                , "code": parent_json.code
                , "number": parent_json.number
            })
            number_val = parent_json.number;
            var datatime = [], datavalue = [];
            $.ajax({
                url: "/ht/lineChart.json",
                type: "GET",
                data: {code: "03", number: number_val},
                success: function (result) {
                    // console.log(result)
                    if (result.status=='200') {
                        // console.log(result)

                        var  data = result.rows;
                        for (var i = 0; i < data.length; i++) {
                            datatime.push(data[i].createTime);
                            datavalue.push(data[i].value);
                        }

                        var option = {
                            title: {},
                            tooltip: {},
                            legend: {
                                data: ['区域1之房间之中子剂量率-1']
                            },
                            xAxis: {
                                data: datatime,
                                name:'时间',
                                nameLocation: 'center',
                                nameGap :55,
                                axisLabel: {
                                    interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
                                    rotate:-20    //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: ['#224,230,241'],
                                        width: 1,
                                        type: 'solid'
                                    }
                                }
                            },
                            yAxis: {
                                name: '中子剂量率(μSv/h)',
                                nameLocation: 'center',
                                nameGap :50
                            },
                            series: [
                                {
                                    name: '区域1之房间之中子剂量率-1',
                                    type: 'line',
                                    data: datavalue
                                }
                            ]
                        };
                        myChart.setOption(option);
                    }
                }
            });
        }

    })



    // 基于准备好的dom，初始化echarts实例


    // 指定图表的配置项和数据


    // 使用刚指定的配置项和数据显示图表。

</script>


<!--<script type="text/JavaScript">-->

    <!--function loadTwoLine() {-->
        <!--var myChart = echarts.init(document.getElementById('main'));-->
        <!--// 显示标题，图例和空的坐标轴-->
        <!--myChart.setOption({-->
            <!--title: {-->
                <!--text: '异步数据加载示例'-->
            <!--},-->
            <!--tooltip: {-->
                <!--trigger: 'axis'-->
            <!--},-->
            <!--legend: {-->
                <!--data: ['区域1之房间之Y剂量率-1']-->
            <!--},-->
            <!--toolbox: {-->
                <!--show: true,-->
                <!--feature: {-->
                    <!--mark: { show: true },-->
                    <!--dataView: { show: true, readOnly: false },-->
                    <!--magicType: { show: true, type: ['line', 'bar'] },-->
                    <!--restore: { show: true },-->
                    <!--saveAsImage: { show: true }-->
                <!--}-->
            <!--},-->
            <!--calculable: true,-->
            <!--xAxis: {-->
                <!--type: 'category',-->
                <!--boundaryGap: false, //取消左侧的间距-->
                <!--data: []-->
            <!--},-->
            <!--yAxis: {-->
                <!--type: 'value',-->
                <!--splitLine: { show: false },//去除网格线-->
                <!--name: ''-->
            <!--},-->
            <!--series: [{-->
                    <!--name: '区域1之房间之Y剂量率-1',-->
                    <!--type: 'line',-->
                    <!--symbol: 'emptydiamond',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形-->
                    <!--data: []-->
                <!--}]-->
        <!--});-->
        <!--myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画-->
        <!--var names = [];    //类别数组（实际用来盛放X轴坐标值）-->
        <!--var series1 = [];-->
        <!--$.ajax({-->
            <!--type: 'get',-->
            <!--url: '/ht/revEquipmentDataList.json',//请求数据的地址-->
            <!--dataType: "json",        //返回数据形式为json-->
            <!--success: function (result) {-->
                <!--//请求成功时执行该函数内容，result即为服务器返回的json对象-->
               <!--$.each(result.createTime, function (index, item) {-->
                    <!--series2.push(item.createTime);-->
                <!--});-->
                <!--myChart.hideLoading();    //隐藏加载动画-->
                <!--myChart.setOption({        //加载数据图表-->
                    <!--xAxis: {-->
                        <!--data: names-->
                    <!--},-->
                    <!--series: [{-->
                        <!--data: series1-->
                    <!--}]-->
                <!--});-->
            <!--},-->
            <!--error: function (errorMsg) {-->
                <!--//请求失败时执行该函数-->
                <!--alert("图表请求数据失败!");-->
                <!--myChart.hideLoading();-->
            <!--}-->
        <!--});-->
    <!--};-->
    <!--loadTwoLine();-->
<!--</script>-->



</html>
